<template>
  <div>
    <el-drawer
      :visible.sync="show"
      title="商品选择"
      @close="handleCancelClick"
      :size="'50%'"
      :close-on-click-modal="false"
      append-to-body
      class="custom-drawer"
    >
      <div class="drawer-content">
        <!-- 搜索表单 -->
        <el-form :inline="true" label-width="90px" label-position="right" class="search-form">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="商品名称">
                <el-input
                  v-model="query.productName"
                  clearable
                  placeholder="请输入商品名称"
                  class="search-input"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="商品编号">
                <el-input
                  v-model="query.productCode"
                  clearable
                  placeholder="请输入商品编号"
                  class="search-input"
                ></el-input>
              </el-form-item>
              <el-button
                type="primary"
                @click="loadAll"
                icon="el-icon-search"
                class="search-btn"
              >查询</el-button>
            </el-col>
          </el-row>
        </el-form>

        <!-- 商品表格 -->
        <el-table
          :data="list"
          @selection-change="handleSelectionChange"
          border
          empty-text="暂无商品数据"
          ref="skuSelectFormRef"
          class="data-table"
          highlight-current-row
        >
          <el-table-column type="selection" width="55" align="center"></el-table-column>
          <el-table-column label="商品编码" prop="productCode" align="center" min-width="120"></el-table-column>
          <el-table-column label="商品名称" prop="productName" align="center" min-width="150"></el-table-column>
          <el-table-column label="简称" prop="productShortName" align="center" min-width="100"></el-table-column>
          <el-table-column label="规格" prop="productSpec" align="center" min-width="120"></el-table-column>
          <el-table-column label="储存条件" prop="storageCondition" align="center" min-width="150"></el-table-column>
          <el-table-column label="用法用量" prop="administrationDosage" align="center" min-width="120"></el-table-column>
          <el-table-column label="批准文号" prop="approvalNum" align="center" min-width="150"></el-table-column>
          <el-table-column label="生产厂家" prop="manufacturer" align="center" min-width="180"></el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination
          background
          layout="total, prev, pager, next, sizes, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="query.pageNum"
          :page-size="query.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="total"
          class="pagination"
        ></el-pagination>
      </div>

      <!-- 底部按钮 -->
      <div class="drawer-footer">
        <el-button @click="handleCancelClick" class="cancel-btn">取 消</el-button>
        <el-button type="primary" @click="submit" class="confirm-btn">确 认</el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { findNccBasicSkuInfoData } from '@/api/basic/PersonnelInformation.js'

export default {
  name: 'SkuSelect',
  props: {
    show: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      total: 0,
      list: [],
      query: {
        productName: '',
        productCode: '',
        pageNum: 1,
        pageSize: 10,
      },
      selectData: [], // 选中的数据
    }
  },
  watch: {
    // 监听show变化，当抽屉打开时清空选中数据
    show(newVal) {
      if (newVal) {
        this.clearSelection();
      }
    }
  },
  created() {
    this.loadAll();
  },
  methods: {
    // 清空选中状态
    clearSelection() {
      this.selectData = [];
      if (this.$refs.skuSelectFormRef) {
        this.$refs.skuSelectFormRef.clearSelection();
      }
    },

    // 关闭抽屉
    handleCancelClick() {
      this.$emit('update:show', false);
    },

    // 确认选择
    submit() {
      if (this.selectData.length === 0) {
        this.$message.warning('请至少选择一条数据');
        return;
      }
      this.$emit('getData', this.selectData);
      this.$emit('update:show', false);
    },

    // 选择变化
    handleSelectionChange(val) {
      this.selectData = val;
    },

    // 分页大小变化
    handleSizeChange(newsize) {
      this.query.pageNum = 1;
      this.query.pageSize = newsize;
      this.loadAll();
    },

    // 当前页变化
    handleCurrentChange(newpage) {
      this.query.pageNum = newpage;
      this.loadAll();
    },

    // 加载数据
    loadAll() {
      findNccBasicSkuInfoData(this.query).then(response => {
        this.list = response.rows;
        this.total = response.total;
      });
    },
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-drawer__header{
  margin-bottom: 0;
  font-size: 20px;
  font-weight: 600;
}
::v-deep .custom-drawer {
  .el-drawer__header {
    margin-bottom: 0;
    padding: 16px 20px;
    border-bottom: 1px solid #ebeef5;
    color: #333;
    font-size: 16px;
    font-weight: 500;
  }

  .el-drawer__body {
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    height: 100%;
  }
}

.drawer-content {
  padding: 20px;
  flex: 1;
  overflow: auto;

  .search-form {
    margin-bottom: 20px;

    .search-input {
      width: 200px;
    }

    .search-btn {
      margin-left: 10px;
    }
  }

  .data-table {
    width: 100%;
    margin-bottom: 20px;

    .el-table__header-wrapper th {
      background-color: #f5f7fa;
      color: #333;
      font-weight: 600;
    }

    .el-table__body tr:hover > td {
      background-color: #f5f7fa !important;
    }
  }

  .pagination {
    margin-top: 20px;
    text-align: right;
  }
}

.drawer-footer {
  padding: 16px 20px;
  border-top: 1px solid #e8e8e8;
  text-align: right;

  .cancel-btn {
    margin-right: 15px;
  }

  .confirm-btn {
    background-color: #409EFF;
    border-color: #409EFF;

    &:hover {
      background-color: #66b1ff;
      border-color: #66b1ff;
    }
  }
}
</style>
